import React, { useState } from 'react'
import { Link, connect } from 'umi'
import { UserOutlined, LockOutlined, VerifiedOutlined } from '@ant-design/icons'
import { Helmet, HelmetProvider } from 'react-helmet-async'
import { Checkbox, Form, Input, Button, Divider } from 'antd'
import SelectLang from '@/components/SelectLang'
import useCodeVerify from '../../hooks/useCodeVerify'
import logo from '@/assets/logo.svg'
import '../../themes/index.less'
import styles from './index.less'

const Login = props => {
  const [autoLogin, setAutoLogin] = useState(true)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [form] = Form.useForm()

  const { loading, url, refresh } = useCodeVerify()

  /**
   * 登录事件
   */
  const handleSubmit = () => {
    form.validateFields().then(values => {
      const { dispatch } = props
      setConfirmLoading(true)
      dispatch({
        type: 'global/login',
        payload: {
          data: values,
          callback: () => {
            setConfirmLoading(false)
            refresh()
          },
        },
      })
    })
  }

  return (
    <HelmetProvider>
      <Helmet>
        <title>登录</title>
        <meta name="description" content="千秋里后台管理系统登录页" />
      </Helmet>
      <div className={styles.container}>
        <div className={styles.lang}>
          <SelectLang />
        </div>
        <div className={styles.content}>
          <div className={styles.main}>
            <div className={styles.top}>
              <div className={styles.header}>
                <Link to="/">
                  <img alt="logo" className={styles.logo} src={logo} />
                  <span className={styles.title}>千秋里</span>
                </Link>
              </div>
              <Divider plain className={styles.desc}>
                为 社 区 团 购 而 生
              </Divider>
            </div>
            <Form form={form}>
              <Form.Item
                name="adminName"
                rules={[{ required: true, message: '请输入用户名' }]}
              >
                <Input
                  size="large"
                  placeholder="用户名"
                  prefix={<UserOutlined />}
                />
              </Form.Item>
              <Form.Item
                name="adminPwd"
                rules={[{ required: true, message: '请输入登录密码' }]}
              >
                <Input.Password
                  size="large"
                  placeholder="登录密码"
                  prefix={<LockOutlined />}
                />
              </Form.Item>
              <div className="ub ub-row ub-as ub-sb">
                <Form.Item
                  className="ub-f1"
                  name="verCode"
                  rules={[{ required: true, message: '请输入验证码' }]}
                >
                  <Input
                    size="large"
                    placeholder="验证码"
                    prefix={<VerifiedOutlined />}
                  />
                </Form.Item>
                <div className={styles['code-verify']} onClick={refresh}>
                  {!loading && <img src={url} alt="验证码损坏" />}
                </div>
              </div>
              <Form.Item>
                <Checkbox
                  checked={autoLogin}
                  onChange={e => setAutoLogin(e.target.checked)}
                >
                  自动登录
                </Checkbox>
              </Form.Item>
              <Form.Item>
                <Button
                  size="large"
                  type="primary"
                  className="ub-fh"
                  loading={confirmLoading}
                  onClick={handleSubmit}
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </HelmetProvider>
  )
}

export default connect(({ global }) => ({ global }))(Login)
